<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>标签横向瀑布流</title> 
    <style>
        body{
            padding-left: 100px;
        }
        ul{
            list-style: none;
            font-size: 14px;
            width: 450px;
            padding: 0;
            display: grid;
            /* grid-auto-columns横向不行，只对宽度一部分进行了网格划分，剩余部分未使用，是否初始元素未撑满造成？*/
            /* grid-auto-columns: 1px; */
            grid-template-columns: repeat(var(--l,41),1fr);
            grid-auto-flow: dense;
            justify-items: start;
            gap: 10px 0;
        }
        li{
            color: lightcoral;
            display: inline-flex;
            grid-column: span var(--l);
            white-space: nowrap;
        }
        span{
            background: #ddd;
            border-radius: 8px;
            padding: 5px 10px;
        }
    </style>
</head>
<body>
    <ul></ul>
    <script>
        buildTag();
        setSpan();

        function setSpan(){
            let ul = document.querySelector('ul');
            let colWidth = 1;
            /*子项间隔，用网格弥补gap，因为横向网格非常密集，grid本身的gap也会密集产生，不符合元素连续占用网格的场景，用元素多占用若干网格来形成gap*/
            let itemGap = 10;
            Array.from(ul.children).map(t => {
                let w = t.offsetWidth;
                let gapSpan = Math.ceil(itemGap/colWidth);
                let span = Math.ceil(w / colWidth) + gapSpan;
                t.style.setProperty('--l', span);
                // t.style.gridColumnEnd = `span ${span}`;
            })
            let ulSpan = Math.ceil(ul.offsetWidth / colWidth);
            ul.style.setProperty('--l', ulSpan);
            // ul.style.gridColumnEnd = `span ${ulSpan}`;
        }

        function buildTag(){
            let pattern = new RegExp("[\u4E00-\u9FA5]+");
            let a = ['客开赋能机器人开发流程','后端运维工程开发环境','Red Tea',
            '交易快照:服务内容不符时可作为判断依据','商户信息有误，我要上报我要申请退款',
            '您点错了，这个订单不是外卖.分店可否使用','团购券如何使用美团券能否叠加使用','订单是否为外卖',
            'Milk开发环境','测试环境','前端','java','环境','开发环境'];
            let ul = document.querySelector('ul');
            a.map((t,i) => {
                //用字符个数粗估span占比，先填充上，避免闪动
                let len = t.length;
                if(pattern.test(t)){
                    len *= 1.15;
                }
                len = Math.ceil(len) + 2;
                ul.insertAdjacentHTML('beforeend',`<li style="--l:${len}"><span>${i+1}.${t}</span></li>`)
            })
        }
    </script>
</body>
</html>